<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<f:layout name="Backend/Default"/>

<f:section name="content">
    <h1>{f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.header')}</h1>
    <p class="lead">{f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.description')}</p>
    <div class="callout callout-warning">
        <div class="media">
            <div class="media-left">
                <span class="fa-stack fa-lg callout-icon">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-warning fa-stack-1x"></i>
                </span>
            </div>
            <div class="media-body">
                <h4 class="callout-title">
                    {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.backupwarning.header')}
                </h4>
                <div class="callout-body">
                    {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.backupwarning')}
                </div>
            </div>
        </div>
    </div>

    <f:if condition="{error}">
        <div class="alert alert-danger">
            <div class="message-header">
                {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.error.configuration.title')}
            </div>
            <div class="message-body">
                <f:translate key="LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:{error}" default="{error}"/>
            </div>
        </div>
    </f:if>
    <div id="news-import-form">
        <f:if condition="{availableJobs -> f:count()} > 1">
            <f:then>
                <div class="form-group">
                    <label for="jobSelector" class="col-xs-2 control-label">
                        {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.choose_a_job')}
                    </label>

                    <div class="col-xs-3">
                        <f:form.select id="jobSelector" options="{availableJobs}" class="form-control"/>
                    </div>
                </div>
                <br/><br/>
            </f:then>
            <f:else>
                <div class="alert alert-info">
                    <f:form.select id="jobSelector" options="{}" style="display:none"/>
                    {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.nojobs')}
                </div>
            </f:else>
        </f:if>
    </div>

    <div id="job" style="display:none;">
        <div class="progress">

            <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0"
                 aria-valuemax="100"
                 style="width: 0;">0%
            </div>
        </div>
        <button id="startButton" class="btn btn-primary">Start</button>
    </div>
    <div id="news-import-done" class="alert alert-success" style="display:none">
        {f:translate(key:'LLL:EXT:news/Resources/Private/Language/locallang_be.xlf:import.done')}
    </div>

    <script type="text/javascript">
        var moduleUrl = '{f:format.raw(value: moduleUrl)}';
    </script>
</f:section>
</html>